<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    String basePath = request.getContextPath();
    Object roleIdTemp = request.getSession().getAttribute("roleId");
    Object email = request.getSession().getAttribute("email");
    Integer roleId = -1;
    if (roleIdTemp != null) {
        roleId = Integer.parseInt(roleIdTemp.toString());
    }

%>

<!DOCTYPE HTML>
<html>
<head>
    <title>销量统计</title>
    <jsp:include page="../common/common-css.jsp"></jsp:include>
    <jsp:include page="../common/common-js.jsp"></jsp:include>
    <script type="application/javascript" src="<%=basePath%>/plugin/Echarts/echarts.min.js"></script>
</head>
<body style="background-color: #F5F5F5;">
<jsp:include page="../../head.jsp"></jsp:include>
<div class="container-fluid" style="padding: 0px">
    <div class="col-xs-0 col-sm-0 col-md-2 col-lg-3"></div>
    <div class="col-xs-12 col-sm-12 col-md-8 col-lg-6" style="padding: 10px 0px">
        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12" style="padding: 0px">
            <div class="panel panel-default"
                 style="margin-top: 15px;border: none;border-radius: 0px;-webkit-border-radius: 0px;-moz-border-radius: 0px;border: none">
                <div class="panel-body" style="border: none">
                    <table style="width: 100%;">
                        <tr>
                            <td style="width: 50%;border-right: 1px solid lavender" align="center">
                      <span style="color: blueviolet;font-size: large" id="platWater">
                        <p><i class="icon-spinner icon-spin text-default-color"></i>&nbsp;正在计算...</p>
                      </span>
                                <small>总流水</small>
                            </td>
                            <td style="width: 50%;border-left: 1px solid lavender" align="center">
                      <span style="color: blueviolet;font-size: large" id="platIncome">
                        <p><i class="icon-spinner icon-spin text-default-color"></i>&nbsp;正在计算...</p>
                      </span>
                                <small>总收益</small>
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12" style="padding: 0px">
            <div class="panel panel-default"
                 style="border-radius: 0px;-webkit-border-radius: 0px;-moz-border-radius: 0px;border: none">
                <div class="panel-heading text-center"
                     style="border-radius: 0px;-webkit-border-radius: 0px;-moz-border-radius: 0px;background-color: blueviolet;color: #ffffff;border: none">
                    消费流水
                </div>
                <div class="panel-body" style="padding: 10px;border: none">
                    <div id="chart" style="height: 200px;margin: 0px" class="text-center">
                        <p style="margin-top: 20px;color: darkgrey"><i
                                class="icon-spinner icon-spin text-default-color"></i>&nbsp;正在计算...
                        </p>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 text-center" style="padding: 0px">
            <div class="panel panel-default"
                 style=";border-radius: 0px;-webkit-border-radius: 0px;-moz-border-radius: 0px;border: none">
                <div class="panel-heading text-center"
                     style="background-color: blueviolet;color: #ffffff;border: none;border-radius: 0px;-webkit-border-radius: 0px;-moz-border-radius: 0px"
                     id="statisticDesc"></div>
                <div class="panel-body" style="padding: 10px;border: none">
                    <div id="statisticChart" style="height: 200px;margin: 0px" class="text-center">
                        <p style="margin-top: 20px;color: darkgrey"><i
                                class="icon-spinner icon-spin text-default-color"></i>&nbsp;正在计算...
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<jsp:include page="../common/common-html.jsp"></jsp:include>
<jsp:include page="../../foot.jsp"></jsp:include>
</body>
<script>

    function statisticChart(xAixs, yAixs, legendName, yName, chartType) {
        var myChart = echarts.init(document.getElementById('statisticChart'));
//        var xName = "统计时间：" + getCurDate();
        var xName = '';
        var option = {
            legend: {
                left: 'center',
                data: [legendName]
            },
            xAxis: {
                type: 'category',
                name: xName,
                nameLocation: 'middle',
                nameGap: '30',
                data: xAixs,
                axisLabel: {'interval': 0, rotate: 35}
            },
            yAxis: {
                name: yName,
                type: 'value'
            },
            series: [{
                name: legendName,
                type: chartType,
                data: yAixs,
                smooth: true,
                label: {
                    normal: {
                        show: 'true'
                    }
                },
                areaStyle: {normal: {}}
            }]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    }

    function showChart(xAixs, platWaterYaixs, platCostYaixs, platIncomeYaixs, useryAixs) {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('chart'));
        var xName = "统计时间：" + getCurDate();
        // 指定图表的配置项和数据
        var option = {
            legend: {
                left: 'center',
                data: ['流水', '成本', '收益']
            },
            xAxis: {
                type: 'category',
                name: xName,
                nameLocation: 'middle',
                nameGap: '30',
                data: xAixs
            },
            yAxis: {
                name: '金额/元',
                type: 'value'
            },
            series: [{
                name: '流水',
                type: "line",
                data: platWaterYaixs,
                smooth: true,
                label: {
                    normal: {
                        show: 'true'
                    }
                },
                areaStyle: {normal: {}}
            }, {
                name: '成本',
                type: "line",
                data: platCostYaixs,
                smooth: true,
                label: {
                    normal: {
                        show: 'true'
                    }
                },
                areaStyle: {normal: {}}
            }, {
                name: '收益',
                type: "line",
                data: platIncomeYaixs,
                smooth: true,
                label: {
                    normal: {
                        show: 'true'
                    }
                },
                areaStyle: {normal: {}}
            }]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    }

    function loadPlatWater(platWater) {
        $("#platWater").html("<h1 style='margin-bottom: 0px;margin-top: 5px'><small>￥</small>" + platWater + "</h1>");
    }
    function loadPlatIncome(platIncome) {
        $("#platIncome").html("<h1 style='margin-bottom: 0px;margin-top: 5px'><small>￥</small>" + platIncome + "</h1>");
    }

    // - 流水统计
    function platDataStatistic() {
        var url = '';
        var role = '<%=roleId%>';
        if (role == 1 || role == 2) {
            // - 超级管理员和管理员
            url = "<%=basePath%>/user/platStatistic";
        } else {
            // - 销售
            url = "<%=basePath%>/user/shopStatistic";
        }
        $.post(url, function (data, status) {
            if (status == 'success') {
                showChart(data.xAixs, data.platWateryAixs, data.platCostyAixs, data.platIncomeyAixs, data.yAixs);
                loadPlatWater(data.platWater);
                loadPlatIncome(data.platIncome);
            } else {
                loadPlatWater('加载超时');
                loadPlatIncome('加载超时');
            }
        })
    }
    function getCurDate() {
        var date = new Date();
        var temp = '';
        var month = date.getMonth() + 1;
        temp = date.getFullYear() + "-" + month;
        return temp;
    }
    // - 用户统计
    function userStatistic() {
        $("#statisticDesc").text('用户统计');
        var url = '<%=basePath%>/user/userStatistic';
        $.post(url, function (data, status) {
            statisticChart(data.xAixs, data.yAixs, '用户数', '用户数', 'line');
        })
    }
    // - 商品销量统计
    function salesStatistic() {
        $("#statisticDesc").text('商品销量统计');
        var url = '<%=basePath%>/order/statisticSales';
        $.post(url, function (data, status) {
            statisticChart(data.xAixs, data.yAixs, '销量', '销量', 'bar');
        })
    }
    $(function () {
        if (!validateEmail('<%=email%>')) {
            return;
        }
        initStyle();
        // - 流水统计
        platDataStatistic();
        var role = '<%=roleId%>';
        if (role == 1 || role == 2) {
            // - 用户统计
            userStatistic();
        }
        if (role == 3 || role == 4) {
            // - 商品销量统计
            salesStatistic();
        }
    })
</script>
</html>
